<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>结算页</title>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css"/>
    <link rel="stylesheet" href="css/vendor/vendor.min.css">
    <link rel="stylesheet" href="css/plugins/plugins.min.css">
    <!-- Style CSS -->
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <link rel="stylesheet" href="css/style.min.css">
</head>

<body>
<div th:include="~{top :: t}"></div>
<div id="app">

    <!--head-->
    <!-- 头部栏位 -->
    <!--页面顶部-->
    <div class="cart py-container">
        <form action="submitOrder.do" method="post">
            <!--主内容-->
            <div class="checkout py-container">
                <div class="checkout-tit">
                    <h4 class="tit-txt">填写并核对订单信息</h4>
                </div>
                <div class="checkout-steps">
                    <!--收件人信息-->
                    <div class="step-tit">
                        <h5>收件人信息<span></span></h5>
                    </div>
                    <div class="step-cont">
                        <div class="addressInfo">
                            <ul class="addr-detail">
                                <li class="addr-item">
                                    <div class="choose-address" v-for="address in addressList">
                                        <div :class="order.receiverAddress==address.address?'con name selected':'con name'"
                                             @click="selectAddress(address)"><a
                                                href="javascript:;">{{address.contact}}<span
                                                title="点击取消选择"></span></a></div>
                                        <div class="con address">
                                            <span class="place">{{address.address}}</span>
                                            <span class="phone">{{address.phone}}</span>
                                            <span class="base" v-if="address.isDefault=='1'">默认地址</span>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>

                                </li>
                            </ul>
                            <!--确认地址-->
                        </div>
                    </div>
                    <div class="hr"></div>
                    <!--支付和送货-->
                    <div class="payshipInfo">
                        <div class="step-tit">
                            <h5>支付方式</h5>
                        </div>
                        <div class="step-cont">
                            <ul class="payType">
                                <li class="selected" @click="order.payType='1'">在线支付<span title="点击取消选择"></span></li>
                                <li @click="order.payType='0'">货到付款<span title="点击取消选择"></span></li>
                            </ul>
                        </div>
                        <div class="hr"></div>
                        <div class="step-tit">
                            <h5>送货清单</h5>
                        </div>
                        <div class="step-cont">
                            <ul class="send-detail">
                                <li>
                                    <div class="sendType">
                                        <span>配送方式：</span>
                                        <ul>
                                            <li>
                                                <div class="con express">极速配送</div>
                                                <div class="con delivery">配送时间：预计1天内送达</div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="sendGoods">
                                        <span>商品清单：</span>
                                        <ul class="yui3-g" th:each="lis,lisSta:${list}">
                                            <li class="yui3-u-1-6">
                                                <input type="hidden" name="fileName" th:value="'upload/' + ${lis.filename}"/>
                                                <span><img  th:src="'upload/' + ${lis.filename}" width="100px"
                                                           height="100px"/></span>
                                            </li>
                                            <li class="yui3-u-7-12">
                                                <input type="hidden" name="goodsName" th:value="${lis.goodsName}"/>
                                                <div class="desc"  th:text="${lis.goodsName}"></div>
                                                <div class="seven">7天无理由退货</div>
                                            </li>
                                            <li class="yui3-u-1-12">
                                                <input type="hidden" name="price" th:value="${lis.price}"/>
                                                <div class="price"  th:text="${lis.price}"></div>
                                            </li>
                                            <li class="yui3-u-1-12">
                                                <div class="num"></div>
                                            </li>
                                            <li class="yui3-u-1-12">
                                                <input type="hidden" name="stock" th:value="${lis.stock}"/>
                                                <div class="exit" th:text="${'库存:' + lis.stock + 'KG'}">有货</div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="buyMessage">
                                        <span>买家留言：</span>
                                        <textarea name="remarks" placeholder="建议留言前先与商家沟通确认" class="remarks-cont"
                                                  v-model="order.buyerMessage"></textarea>
                                    </div>
                                </li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <div class="hr"></div>
                    </div>

                    <div class="linkInfo">
                        <div class="step-tit">
                            <h5>发票信息</h5>
                        </div>
                        <div class="step-cont">
                            <span>普通发票（电子）</span>
                            <span>个人</span>
                            <span>明细</span>
                        </div>
                    </div>
                    <div class="cardInfo">
                        <div class="step-tit">
                            <h5>使用优惠/抵用</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-summary">
                <div class="static fr">
                    <div class="list">
                        <input type="hidden" name="totalNum" th:value="${totalNum}"/>
                        <span><i class="number" th:text="${totalNum}"></i>件商品，总商品金额</span>
                        <input type="hidden" name="totalPrice" th:value="${totalPrice}"/>
                        <em class="allprice" th:text="${totalPrice}"></em>
                    </div>
                    <div class="list">
                        <span>返现：</span>
                        <em class="money">0</em>
                    </div>
                    <div class="list">
                        <span>运费：</span>
                        <em class="transport">0.00</em>
                    </div>
                </div>
            </div>
            <div class="clearfix trade">
                <div class="fc-price">应付金额:　<span class="price" th:text="${totalPrice}"></span></div>
                <div class="fc-receiverInfo">
                    寄送至:
                    <span id="receive-address" th:text="${addr}"></span>
                    收货人：<span id="receive-name" th:text="${realName}"></span>
                    <span id="receive-phone" th:text="${tel}"></span>
                </div>
            </div>
            <div class="submit">
                <input class="sui-btn btn-danger btn-xlarge" type="submit" value="提交订单"/>
            </div>
        </form>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
    <div class="clearfix footer" th:include="~{footer :: foot}">
        <div class="py-container">
            <div class="footlink">
                <div class="Mod-service">
                    <ul class="Mod-Service-list">
                        <li class="grid-service-item intro  intro1">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro2">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro  intro3">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item  intro intro4">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                        <li class="grid-service-item intro intro5">

                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>

                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>品优购E卡</li>
                                <li>品优购通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="img/wx_cz.jpg">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                    <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->
<script type="text/javascript" src="js/jquery.min.js"></script>

<script>


    $(function () {
        $(".address").hover(function () {
            $(this).addClass("address-hover");
        }, function () {
            $(this).removeClass("address-hover");
        });

        $(".choose-address .name").click(function () {
            $(this).addClass("selected");
            $(this).parent().siblings().children('.name').removeClass("selected");
            var place = $(this).siblings('.address').children('.place').text();
            var phone = $(this).siblings('.address').children('.phone').text();
            $("#receive-name").text($(this).text());
            $("#receive-address").text(place);
            $("#receive-phone").text(phone)
        });
        $(".payType li").click(function () {
            $(this).toggleClass("selected").siblings().removeClass("selected");
        });
    })


</script>


<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                cartList: [],
                totalNum: 0,
                totalMoney: 0,
                payMoney: 0,//应付金额
                preferential: 0,//优惠金额
                addressList: [],//地址列表
                order: {receiverContact: "", receiverMobile: "", receiverAddress: "", payType: "1"}//订单
            }
        },
        created() {
            this.findCartList();
            this.findAddressList(); //查询地址列表
        },
        methods: {
            findCartList() {
                axios.get(`/cart/findNewOrderItemList.do`).then(response => {
                    this.cartList = response.data;
                    this.count();
                });
            },
            count() {
                this.totalNum = 0;
                this.totalMoney = 0;
                for (let i = 0; i < this.cartList.length; i++) {
                    if (this.cartList[i].checked) {
                        this.totalNum += this.cartList[i].item.num;
                        this.totalMoney += this.cartList[i].item.money;
                    }
                }

                axios.get(`/cart/preferential.do`).then(response => {
                    this.preferential = response.data.preferential; //优惠金额
                    this.payMoney = this.totalMoney - this.preferential; //优惠后金额
                })
            },
            findAddressList() {
                axios.get(`/cart/findAddressList.do`).then(response => {
                    this.addressList = response.data;
                    //默认地址显示
                    for (let i = 0; i < this.addressList.length; i++) {
                        if (this.addressList[i].isDefault == '1') {
                            this.order.receiverAddress = this.addressList[i].address; //地址
                            this.order.receiverContact = this.addressList[i].contact; //联系人
                            this.order.receiverMobile = this.addressList[i].phone; //手机号
                        }
                    }

                })
            },
            selectAddress(address) {
                this.order.receiverAddress = address.address; //地址
                this.order.receiverContact = address.contact; //联系人
                this.order.receiverMobile = address.phone; //手机号
            },
            saveOrder() {
                axios.post(`/cart/saveOrder.do`, this.order).then(response => {
                    if (response.data.ordersn != null) {
                        if (this.order.payType == '1') {
                            location.href = `pay.html?ordersn=${response.data.ordersn}&money=${response.data.money}`; //跳转到支付页面
                        } else {
                            location.href = `order-success.html?ordersn=${response.data.ordersn}&money=${response.data.money}`; //跳转到支付页面
                        }
                    } else {
                        location.href = `order-fail.html`;
                    }
                })
            }
        }
    });


</script>

</body>

</html>